
//react16提供支持porttal
import React from 'react';
import {createPortal} from 'react-dom';

class Dialog extends React.Component {
    constructor() {
        super(...arguments);
        const doc = window.document;
        this.node = doc.createElement('div');
        doc.body.appendChild(this.node);
    }

    render() {
        return createPortal(
            <div class="dialog">
                {this.props.children}
            </div>, //塞进传送门的JSX
            this.node //传送门的另一端DOM node
        );
    }

    componentWillUnmount() {
        window.document.body.removeChild(this.node);
    }
}








// import React from 'react'
// import ReactDOM from 'react-dom'
// import PropTypes from 'prop-types'
// function createPortal(){
//     class Portal extends React.Component {

//     }
//     return Portal
// }
// export default createPortal()

// import React from 'react'
// import ReactDOM from 'react-dom'
// import PropTypes from 'prop-types'

// function CreatePortal() {
//     class Portal extends React.Component{
//         constructor(props) {
//             super(props)
//             this.el = document.createElement('div')
//             if (!!props) {
//                 this.el.id = props.id || false
//                 if (props.className) this.el.className = props.className
//                 if (props.style) {
//                     Object.keys(props.style).map((v) => {
//                         this.el.style[v] = props.style[v]
//                     })
//                 }
//                 document.body.appendChild(this.el)
//             }
//         }
//         componentDidMount() {
//             document.body.appendChild(this.el);
//         }
//         componentWillUnmount() {
//             document.body.removeChild(this.el)
//         }
//         render() {
//             return ReactDOM.createPortal(
//                 this.props.children,
//                 this.el
//             )
//         }
//     }
//     Portal.propTypes = {
//         style: PropTypes.object
//     }
//     return Portal
// }
// export default CreatePortal()